解決したいこと
Expressでバックエンドとフロントエンドを開発し、VPSで外部に公開したいです。
Reactでフロントエンドを作り、バックエンドはExpressでサービスを開発しました。
サービスの概要は,audio/のmp3を流せるサービスです。いいね機能や、再生済みリストなど機能があります。
フロントエンド（React）はnpm run buildを実行し、build配下に生成された、ファイルをバックエンド(Express)のPublicに配置しました。この状態でローカル環境では動作しますが、VPSで公開し、グローバルIPでアクセスするとエラーが発生します。
また、このサイトはcloudflareのtunnnelを使用して公開するため、SSLをしていません。可能であれば、SSLなしで公開したいです。
下記は最小で動作するコードです。
自分で試したこと
実際にVPSで公開した時にブラウザ発生するエラー
The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.
xxx.xxx.xxx.xx/:16 The page requested an origin-keyed agent cluster using the Origin-Agent-Cluster header, but could not be origin-keyed since the origin 'http://xxx.xxx.xxx.xx:3000' had previously been placed in a site-keyed agent cluster. Update your headers to uniformly request origin-keying for all pages on the origin.
xxx.xxx.xxx.xx/:13
GET https://xxx.xxx.xxx.xx:3000/static/css/main.d014acd4.css net::ERR_SSL_PROTOCOL_ERROR
GET https://xxx.xxx.xxx.xx:3000/static/js/main.f8583b5c.js net::ERR_SSL_PROTOCOL_ERROR
:3000/favicon.ico:1
GET https://xxx.xxx.xxx.xx:3000/favicon.ico net::ERR_SSL_PROTOCOL_ERROR
ソースコード
const fetch = require('node-fetch');
const express = require('express');
const fs = require('fs');
const path = require('path');
const AsyncLock = require('async-lock');
const helmet = require('helmet');
const lock = new AsyncLock();
const app = express();
app.use(helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: ["'self'"],
mediaSrc: ["'self'", "*"],
},
},
}));
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});
const port = 3000;
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function (req, res) {
res.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})
app.get('/music/:filename', (req, res) => {
const filename = req.params.filename;
const filePath = path.join(__dirname, 'audio', filename);
res.sendFile(filePath);
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
ディレクトリツリー(モジュール部分は省いてます)
├── app.js
├── audio
│ ├── a.mp3
│ └── b.mp3
├── package-lock.json
├── package.json
├── played_music.json
└── public
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo100.png
├── manifest.json
├── robots.txt
└── static
├── css
│ ├── main.d014acd4.css
│ └── main.d014acd4.css.map
└── js
├── main.f8583b5c.js
├── main.f8583b5c.js.LICENSE.txt
└── main.f8583b5c.js.map
わかる方がいたら教えていただきたいです。
